// 生成文章的目录
<template>
  <div class="ContentList-content">
    <h2 v-if="toc[0]">文章目录</h2>
    <LabelList :list="toc" @select="handleClick" />
  </div>
</template>

<script>
import LabelList from "../LabelList";
export default {
  props: ["list"],
  components: {
    LabelList,
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    // 设置 url 的 hash 值；
    handleClick(item) {
      location.hash = item.anchor;
    },

    // 设置文章标题列表的选中效果
    setScroll() {
      let boundary = 200;
      for (const dom of this.doms) {
        if (!dom) {
          // 如果当前dom不存在，则跳转到下一个循环；
          continue;
        }
        let top = dom.getBoundingClientRect().top;
        if (top <= boundary && top >= 0) {
          // 表示这个标题处于被选中的位置，结束循环
          this.active = dom.id;
          return;
        } else if (top < 0) {
          // 表示这个标题处于顶部以上的位置，继续循环
          this.active = dom.id;
        } else {
          // 表示这个标题处于后面的位置，结束循环
          return;
        }
      }
    },
  },
  created() {
    this.$bus.$on("mainScroll", this.setScroll);
  },
  beforeDestroy() {
    this.$bus.$off("mainScroll", this.setScroll);
  },
  computed: {
    toc() {
      // 递归处理标题数据
      let setLink = (toc = []) => {
        return toc.map((item) => {
          return {
            ...item,
            isSelect: item.anchor === this.active,
            children: setLink(item.children),
          };
        });
      };
      return setLink(this.list);
    },
    // 递归获取所有文章标题的 dom
    doms() {
      const doms = [];
      let getDoms = (toc = []) => {
        return toc.map((item) => {
          doms.push(document.getElementById(item.anchor));
          if (item.children) {
            getDoms(item.children);
          }
        });
      };
      getDoms(this.list);
      return doms;
    },
  },
};
</script>

<style lang="less" scoped>
</style>